<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>角色功能模块维护</legend>
		</fieldset>
		<!--顶部工具栏-->
		<script type="text/html" id="topToolbar">
			<button class="layui-btn layui-btn-sm" lay-event="addRole">
				<i class="layui-icon">&#xe608;</i>
				添加角色
			</button>
		</script>
		<!--行内工具栏-->
		<script type="text/html" id="lineToolbar">
			
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="setPermission">
				<i class="layui-icon">&#xe716;</i>设置权限
			</a>
			<!-- <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addRoot">
				<i class="layui-icon">&#xe716;</i>设置模块
			</a> -->
			<a class="layui-btn layui-btn-xs" lay-event="update">
				<i class="layui-icon">&#xe642;</i>编辑
			</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
				<i class="layui-icon">&#xe640;</i>删除
			</a>
		</script>
		
		<table id="roleTab" class="layui-table" lay-filter="test"></table>
		<!--
        	添加角色页面
        -->
        <div id="addPage" style="display: none;">
        	<form class="layui-form" id="addRoleInfo" action="" onsubmit="return false">
        		<input type="hidden" name="token" id="myToken" />
        		<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色名:</label>
					<div class="layui-input-inline">
						<input type="text" placeholder="请输入角色名" name="roleName"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色解释:</label>
					<div class="layui-input-inline">
						<input type="text" placeholder="请输入角色解释" name="roleExplain"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-submit="" lay-event="addRole" lay-filter="addRole">
						<i class="layui-icon">&#xe605;</i>保存
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">
						<i class="layui-icon">&#x1006;</i>重置
					</button>
				</div>
        	</form>
        </div>
        <!--
        	修改页面
        -->
        <div id="updatePage" style="display: none;">
        	<form class="layui-form" id="updateRoleInfo" action="" onsubmit="return false" lay-filter="updateForm">
        		<input type="hidden" name="token" id="Token" />
        		<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色名:</label>
					<div class="layui-input-inline">
						<input type="hidden" name="roleId" />
						<input type="text" placeholder="请输入角色名" name="roleName"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 30px;">
				<label class="layui-form-label"><span style="color: red;">*</span>角色解释:</label>
					<div class="layui-input-inline">
						<input type="text" placeholder="请输入角色解释" name="roleExplain"
							lay-verify="required" class="layui-input" />
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-submit="" lay-filter="updateRole">
						<i class="layui-icon">&#xe605;</i>保存
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">
						<i class="layui-icon">&#x1006;</i>重置
					</button>
				</div>
        	</form>
        </div>
        <!--
        	设置模块页面[树模块]
        
        <div id="setRootPage" style="display:none;">
        	<div id="treeModules" class="demo-tree demo-tree-box" style="margin: 10px 0 0 80px;"></div>
        	<button class="layui-btn layui-btn-sm" style="margin: 20px 0 0 90px;" id="setRight">
        		<i class="layui-icon">&#xe605;</i>保存设置
        	</button>
        </div>-->
		<!--
			设置权限页面[树模块]
		-->
		<div id="setPermissionPage" style="display:none;">
			<div id="treePermissions" class="demo-tree demo-tree-box" style="margin: 10px 0 0 80px;"></div>
			<button class="layui-btn layui-btn-sm" style="margin: 20px 0 0 90px;" id="savePermission">
				<i class="layui-icon">&#xe605;</i>保存设置
			</button>
		</div>
	</body>
	<script>
		layui.use(['table','layer','form','tree'],function(){
			var table=layui.table,
			layer=layui.layer,
			form=layui.form,
			tree=layui.tree,
			$=layui.$;
			
			//globalData.echoPermissions(,"role");
			
			//表格渲染
			table.render({
				elem:'#roleTab',
				height:400,
				toolbar:'#topToolbar',
				url:globalData.permissionServer+"/role/listRoles",
				method:'get',
				//headers: {token: globalData.getCurToken()},//设置请求头
				title:'角色表',
				page:true,
				id:'roleList',
				cols:[
					[
					{
						title:'序号',
						type:'numbers',
						width:80,
						align:'center'
					},{
						field:'roleName',
						width:150,
						title:'角色名',
						align:'center'
					},{
						field:'roleExplain',
						width:150,
						title:'角色解释',
						align:'center'
					},{
						field:'createTime',
						width:150,
						title:'创建时间',
						align:'center'
					},{
						field:'updateTime',
						width:150,
						title:'修改时间',
						align:'center'
					},{
						title:'操作',
						width:350,
						align:'center',
						toolbar:'#lineToolbar'
					}
					]
				]
			});
			
			
			//顶部工具栏监听事件
			table.on('toolbar(test)',function(obj){
				switch(obj.event){
					case 'addRole':
						var add_index=layer.open({
							type:1,
							title:'您正在添加角色信息',
							area:['400px','240px'],
							content:$("#addPage"),
							success:function(layero,index){
								//监听提交按钮
								form.on('submit(addRole)',function(obj){
									
									$.ajax({
										type : "post",
										url : globalData.permissionServer+"/role/insertRole",
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(index);
													//关闭窗口并重载
													layer.close(add_index);
													table.reload('roleList');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
									
									return false;
								});
							}
						});
					break;
				}
			});
			
			//行内工具监听事件
			table.on('tool(test)',function(obj){
				var data=obj.data;
				switch(obj.event){
					case 'setPermission':
						var permission_index=layer.open({
							type:1,
							title:'您正在设置角色['+data.roleName+']的权限',
							content:$('#setPermissionPage'),
							area:['400px','500px']
						});
						//根据用户获取用户的权限树
						$.ajax({
							type : "get",
							url : globalData.permissionServer+"/role/getRoleHaveModuleAndPermissionConvertTree",
							data:{
								roleId:data.roleId
							},//需要传递到服务端的数据
							dataType:'json',//服务端响应数据类型
							xhrFields: {
								withCredentials: true
							},
							// beforeSend: function(request) {
							// 	request.setRequestHeader("token", globalData.getCurToken());
							// },
							success : function(res) {
								tree.render({
									id:'permissionTree',
									elem:'#treePermissions',
									data:res,
									showCheckbox:true
								});
								//设置节点勾选
								//tree.setChecked('setR', res.mids); 
							}
						});
						
						var moduleIds;
						var permissionIds;
						//递归获取选中节点的Id
						function getPermissionsChildrenId(node){
							//console.log(node);
							if(node!=null){
								if(node.field=='module'){
									moduleIds.push(node.id);
								}
								if(node.field=='permission'){
									permissionIds.push(node.id);
								}
								
								for(var i=0;node.children!=null&&i<node.children.length;i++){
									getPermissionsChildrenId(node.children[i]);
								}
							}
						}
						//给角色设置权限
						$("#savePermission").click(function(){
							moduleIds = [];
							permissionIds = [];
							var nodes=tree.getChecked('permissionTree');
							
							if(nodes.length>0){
								for(var i=0;i<nodes.length;i++){
									getPermissionsChildrenId(nodes[i]);
								}
							}else{
								layer.msg("请先勾选模块信息再提交！",{icon:2,time:1500});
							}
							// console.log(moduleIds);
							// console.log(permissionIds);
							
							//保存权限设置
							$.ajax({
								type : "post",
								async : false,//是否异步
								url : globalData.permissionServer+"/role/giveRoleSetModuleAndPermission",
								data:{
									'moduleIds':moduleIds,
									'permissionIds':permissionIds,
									'roleId':data.roleId
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(res) {
									layer.close(permission_index);
									if(res.code == 0){
										layer.msg(res.msg,{icon:1,time:3000},function(){
											//tree.reload('permissionTree');
										});
									}else{
										layer.msg(res.msg,{icon:2,time:3000});
									}
								}
							});
							return;
						});
					break;
					// case 'addRoot':
					// //获取功能模块树
					// $.ajax({
					// 	type : "get",
					// 	url : globalData.server+"roles/getAllModulesByRoleId",
					// 	data:{
					// 		id:data.id
					// 	},//需要传递到服务端的数据
					// 	dataType:'json',//服务端响应数据类型
					// 	xhrFields: {
					// 		withCredentials: true
					// 	},
					// 	beforeSend: function(request) {
					// 		request.setRequestHeader("token", globalData.getCurToken());
					// 	},
					// 	success : function(res) {
					// 		tree.render({
					// 			id:'setR',
					// 			elem:'#treeModules',
					// 			data:res,
					// 			showCheckbox:true
					// 		});
					// 		//设置节点勾选
					// 		//tree.setChecked('setR', res.mids); 
					// 	}
					// });
						
					// 	var module_index=layer.open({
					// 		type:1,
					// 		title:'您正在设置角色['+data.name+']的模块',
					// 		content:$('#setRootPage'),
					// 		area:['400px','500px']
					// 	});
					// 	var arr;
					// 	//递归获取选中节点的Id
					// 	function getChildrenId(node){
					// 		if(node!=null){
					// 			arr.push(node.id);
					// 			for(var i=0;node.children!=null&&i<node.children.length;i++){
					// 				getChildrenId(node.children[i]);
					// 			}
					// 		}
					// 	}
					// 	//给角色设置模块
					// 	$("#setRight").click(function(){
					// 		arr=[];
					// 		var nodes=tree.getChecked('setR');
					// 		if(nodes.length>0){
					// 			for(var i=0;i<nodes.length;i++){
					// 				getChildrenId(nodes[i]);
					// 			}
					// 		}else{
					// 			layer.msg("请先勾选模块信息再提交！",{icon:2,time:1500});
					// 		}
							
					// 		//var moduleids=arr;
					// 		//arr=[];
					// 		//console.log("arr"+arr);
					// 		//console.log("moduleids"+moduleids);
					// 		//保存设置
					// 		$.ajax({
					// 			type : "get",
					// 			url : globalData.server+"roles/giveRoleSetModules",
					// 			data:{
					// 				'moduleids':arr,
					// 				'id':data.id
					// 			},//需要传递到服务端的数据
					// 			dataType:'json',//服务端响应数据类型
					// 			xhrFields: {
					// 				withCredentials: true
					// 			},
					// 			beforeSend: function(request) {
					// 				request.setRequestHeader("token", globalData.getCurToken());
					// 			},
					// 			success : function(res) {
					// 				if(res.success){
					// 					layer.msg(res.msg,{icon:1,time:1500},function(){
					// 						//tree.reload('setR');
					// 						layer.close(module_index);
					// 					});
					// 				}else{
					// 					layer.msg(res.msg,{icon:2,time:1500});
					// 				}
					// 			}
					// 		});
							
					// 	});
					// break;
					case 'update':
					form.val('updateForm',data);
					var update_index=layer.open({
							type:1,
							title:'您正在修改角色['+data.roleName+']的信息',
							area:['400px','240px'],
							content:$('#updatePage'),
							success:function(layero,index){
								//监听修改提交
								form.on('submit(updateRole)',function(obj){
									$.ajax({
										type : "put",
										url : globalData.permissionServer+"/role/updateRole",
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('roleList');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
					break;
					case 'del':
						layer.confirm('确认删除角色['+data.roleName+']吗?',{icon:7},function(index){
							layer.close(index);
							$.ajax({
								type : "delete",
								url : globalData.permissionServer+"/role/deleteRole",
								data:{
									roleId:data.roleId
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(res) {
									if(res.code == 0){
										layer.msg(res.msg,{icon:1,time:2000},function(index){
											table.reload('roleList');
										});
										
									}else{
										layer.msg(res.msg,{icon:2,time:2000});
									}
							}
							});
						});
					break;
				}
			});
		});
	</script>
</html>
